<template>
  <div id="right1" stytle="width:100%;height:100%"> </div>
</template>

<script>
//引入所需要的图表
import { Line } from "@antv/g2plot";
//引入get请求
import { get } from "@/utils/request";
//引入moment
import moment from "moment";

export default {
  data() {
    return {
      //数据源
      todayData: [],
    };
  },
  async mounted() {
    await this.getTodayData();
    await this.initRight1();
  },
  methods: {
    //创建图表
    initRight1() {
      const line = new Line("right1", {
        data: this.todayData,
        xField: "year",
        yField: "value",
        label: {},
        point: {
          size: 5,
          shape: "diamond",
          style: {
            fill: "white",
            stroke: "#5B8FF9",
            lineWidth: 2,
          },
        },
        xAxis: {
          label: {
            style: {
              fill: "white",
            },
          },
        },
        yAxis: {
          label: {
            style: {
              fill: "white",
            },
          },
        },
        tooltip: {
          showMarkers: false,
          formatter: (datum) => {
            return { name: "湿度", value: datum.value + "%RH" };
          },
        },
        state: {
          active: {
            style: {
              shadowBlur: 4,
              stroke: "#000",
              fill: "red",
            },
          },
        },
        interactions: [{ type: "marker-active" }],
      });

      line.render();
    },

    //获取数据
    async getTodayData() {
      //配置参数
      let params = {
        page: 1,
        pageSize: 30,
      };
      let res = await get("/dashboard/pageQueryData",params);
      // console.log(res);
      this.todayData = res.data.list.map((item) => {
        return {
          year: this.$options.filters.fmtDate(item.insert_time),
          value: item.humidity,
        };
      });
      // console.log(this.todayData);
    }
  },
  // 局部注册
  filters: {
    fmtDate(date) {
      return moment(date).format(" HH:mm");
      // 或者return自己编写的时间处理函数
    },
  },
};
</script>

<style scoped>
</style>